<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>游戏管理</title>
    <style>
        .el-dialog {
            padding: 0 20px;
        }

        .add-btn {
            width: 100%;
            display: flex;
            display: -webkit-flex;
            /* Safari */
            justify-content: space-between;
            padding: 10px;
        }

        /* title */
        .content-header {
            position: relative;
            padding: 15px 15px 0 15px;
            /* margin-top: 70px; */
        }

        .content-header > h1 {
            margin: 0;
            font-size: 24px;
            font-weight: normal;
        }

        .content-header > h1 > small {
            font-size: 15px;
            display: inline-block;
            padding-left: 4px;
            font-weight: 300;
        }

        .content-header > .breadcrumb {
            float: right;
            background: transparent;
            margin-top: 0;
            margin-bottom: 0;
            font-size: 12px;
            padding: 7px 5px;
            position: absolute;
            top: 20px;
            right: 10px;
            border-radius: 2px;
        }

        .app-container {
            background: #fff;
            margin: 15px 30px 15px 15px;
        }

        .box {
            position: relative;
            border-radius: 3px;
            background: #ffffff;
            border-top: 3px solid #3c8dbc;
            padding: 10px;
            margin-bottom: 20px;
            width: 100%;
            box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
        }

        .filter-container {
            padding: 10px 0 15px 0;
        }

        .filter-container .el-button,
        .filter-container .el-input__inner {
            padding: 0 15px;
            height: 34px;
            line-height: 34px;
        }
    </style>
    <link rel="stylesheet" href="../plugins/elementui/index.css">
    <script src="../js/vue.js"></script>
    <script src="../plugins/elementui/index.js"></script>
    <script src="../js/axios-0.18.0.js"></script>
</head>

<body>
<div id="app">
    <div class="content-header">
        <h1>网站管理<small>游戏管理</small></h1>
        <el-breadcrumb separator-class="el-icon-arrow-right" class="breadcrumb">
            <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item>网站管理</el-breadcrumb-item>
            <el-breadcrumb-item>游戏管理</el-breadcrumb-item>
        </el-breadcrumb>
    </div>

    <div class="app-container">
        <div class="box">

            <div class="filter-container">
                <el-input placeholder="游戏名称" v-model="pagination.name" style="width: 200px;"
                          class="filter-item"></el-input>
                <el-input placeholder="游戏id" v-model="pagination.id" style="width: 200px;"
                          class="filter-item"></el-input>
                <el-button @click="findSearchPage()" class="dalfBut">查询</el-button>
            </div>
            <div class="add-btn">
                <el-button type="primary" size="small" @click="beginAdd">新增游戏</el-button>
                <el-pagination v-show="total > pageSize" @current-change="query" :current-page="lastPage"
                               style="margin-top: 5px" background :page-size="pageSize" :page-sizes="pageSizes"
                               @size-change="handleSizeChange" layout="prev, pager, next, total, sizes" :total="total">
                </el-pagination>
            </div>
            <el-table :data="items" border size="small" current-row-key="id" stripe highlight-current-row>
                <el-table-column v-for="h in headers" :key="h.prop" :prop="h.prop" :label="h.text" :width="h.width"
                                 :align="h.align" v-if="h.prop !== 'imageUrl' && h.prop !== 'spec'">
                </el-table-column>
                <el-table-column v-else :prop="h.prop" :label="h.text" :width="h.width" :align="h.align">
                    <template slot-scope="scope">
                        <img style="width: 50px; height: 50px" :src="scope.row.imageUrl" fit="fill">
                    </template>
                </el-table-column>
                <el-table-column prop="category" label="分类" width="100" align="center">
                    <template slot-scope="scope">
                        <span>{{ getCategoryText(scope.row.category) }}</span>
                    </template>
                </el-table-column>
                <el-table-column prop="description" label="游戏描述" min-width="200">
                    <template slot-scope="scope">
              <span v-if="scope.row.description" @click="showFullDes(scope.row.description)" style="cursor: pointer;">
                {{ scope.row.description.slice(0, 20) }}
                <span v-if="scope.row.description.length > 20">...</span>
              </span>
                        <span v-else>无描述</span>
                    </template>
                </el-table-column>
                <el-table-column align="center" label="操作" fixed="right" :width="160">
                    <template slot-scope="scope">
                        <el-button type="primary" plain icon="el-icon-edit" circle size="mini"
                                   @click="handleEdit(scope.$index, scope.row)"></el-button>
                        <el-button type="danger" plain icon="el-icon-delete" circle size="mini"
                                   @click="handleDelete(scope.$index, scope.row)"></el-button>
                        <el-tooltip class="item" v-if="scope.row.isActive === 2" effect="dark" content="上架"
                                    placement="top-start">
                            <el-button type="success" plain icon="el-icon-upload2" circle size="mini"
                                       @click="handleUp(scope.row.id)"></el-button>
                        </el-tooltip>
                    </template>
                </el-table-column>
            </el-table>
            <!-- 弹出框显示完整序列 -->
            <el-dialog :visible.sync="dialogVisibleDes" title="游戏描述" width="50%" center>
                <div style="max-height: 400px; overflow-y: auto; padding: 20px;">
                    <p style="white-space: pre-wrap; word-break: break-all;">{{ description }}</p>
                </div>
                <span slot="footer" class="dialog-footer">
            <el-button @click="dialogVisibleDes = false">关闭</el-button>
          </span>
            </el-dialog>
            <el-dialog title="游戏信息" :visible.sync="formVisible" width="50%" style="padding: 0 20px;">
                <el-form :model="item" size="small" label-position="left" :label-width="formLabelWidth">
                    <el-form-item label="游戏名称">
                        <el-input v-model="item.name" autocomplete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="分类">
                        <el-select v-model="item.category" placeholder="请选择游戏类别">
                            <el-option label="低级游戏" value="1"></el-option>
                            <el-option label="高级游戏" value="2"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="游戏描述">
                        <el-input v-model="item.description" autocomplete="off"></el-input>
                    </el-form-item>
                    <!--                    <el-form-item label="账号总数量">-->
                    <!--                        <el-input v-model="item.totalAccounts" autocomplete="off"></el-input>-->
                    <!--                    </el-form-item>-->
                    <!--                    <el-form-item label="当前可租用账号数">-->
                    <!--                        <el-input v-model="item.availableAccounts" autocomplete="off"></el-input>-->
                    <!--                    </el-form-item>-->
                    <el-form-item label="游戏图片">
                        <el-upload accept=".jpg,.png,.jpeg,.gif" :limit="1" :auto-upload="false"
                                   :on-change="changeMain">
                            <el-input autocomplete="off"></el-input>
                            <div slot="tip" class="el-upload__tip">只能上传图片文件</div>
                        </el-upload>
                    </el-form-item>
                </el-form>
                <div slot="footer" class="dialog-footer">
                    <el-button @click="formVisible = false">取 消</el-button>
                    <el-button type="primary" @click="saveOrUpdate">确 定</el-button>
                </div>
            </el-dialog>
        </div>
    </div>
</div>

<script>
    // 设置后台服务地址
    axios.defaults.baseURL = "";
    // request拦截器
    axios.interceptors.request.use(
        config => {
            config.headers['authorization'] = 'admin'
            return config
        },
        error => {
            console.log(error)
            Promise.reject(error)
        }
    )

    const app = new Vue({
        el: "#app",
        data: {
            dialogVisibleDes: false,
            description: null,
            pagination: {//分页相关模型数据
                currentPage: 1,//当前页码
                pageSize: 10,//每页显示的记录数
                total: 0,//总记录数
                queryString: null,//查询条件
                pageNo: 1,
                name: '',
                id: null
            },
            pageSize: 5,
            pageSizes: [5, 10, 20, 50, 100, 200],
            headers: [
                {prop: "id", text: "ID", width: 120, align: "center"},
                {prop: "name", text: "名称", width: null, align: "center"},
                // {prop: "category", text: "分类", width: null, align: "center"},
                {prop: "totalAccounts", text: "账号总数量", width: null, align: "center"},
                {prop: "availableAccounts", text: "可用账号数", width: 100, align: "center"},
                {prop: "imageUrl", text: "图片", width: 180, align: "center"},
                // {prop: "description", text: "游戏描述", width: null, align: "center"},
            ],
            items: [],
            total: 1000,
            formVisible: false, // 是否显示表单
            formLabelWidth: "100px", // 表单label宽度
            item: {
                id: null, // 游戏ID
                name: '', // 游戏名称
                description: '', // 游戏描述
                imageUrl: '', // 游戏图片URL
                totalAccounts: 0, // 账号总数量
                availableAccounts: 0, // 当前可租用的账号数量
                category: '', // 游戏类别
                img: ''
            },
            isEdit: false, // 是否是更新
            lastPage: 1,// 上一次查询的页码
        },
        created() {
            this.query(1);
        },
        watch: {
            pageSize() {
                this.query(1);
            }
        },
        methods: {
            changeMain(file) {
                this.item.img = file.raw
            },
            getStatusPrizeText(status) {
                return this.statusMap[status] || '未知状态';
            },
            findSearchPage() {
                this.lastPage = 1;
                this.query();
            },
            handleSizeChange(s) {
                this.pageSize = s;
            },
            beginAdd() {
                this.isEdit = false;
                this.item = {};
                this.formVisible = true;
            },
            async query(page) {
                this.lastPage = page;
                const res = await axios.get("/game/page", {
                    params: {
                        pageNo: this.lastPage ? this.lastPage : 1,
                        pageSize: this.pageSize,
                        name: this.pagination.name,
                        id: this.pagination.id
                    }
                })
                this.items = res.data.records
                this.total = res.data.total
            },
            handleEdit(v1, v2) {
                if (v2.isActive === 1) {
                    this.$message({
                        message: '上架的商品不能修改，请先下架！',
                        type: 'error'
                    });
                    return;
                }
                this.isEdit = true;
                this.item = JSON.parse(JSON.stringify(v2));
                this.formVisible = true;
            },
            handleDelete(v1, v2) {
                if (v2.isActive === 1) {
                    this.$message({
                        message: '上架的商品不能删除，请先下架！',
                        type: 'error'
                    });
                    return;
                }
                this.$confirm('此操作将永久删除商品信息, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    this.deleteById(v2.id);
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });
            },
            async saveOrUpdate() {
                //构建formData
                const data = new FormData()
                for (const key in this.item) {
                    if (key == 'createdAt' || key == 'updatedAt') {
                        continue
                    }
                    data.append(key, this.item[key])
                }
                const res = await axios.post("/game/saveOrUpdate", data)
                const {code, msg} = res.data
                if (code !== 200) {
                    this.$message({
                        message: msg,
                        type: 'error'
                    });
                    return
                }
                this.$message({
                    message: '操作成功',
                    type: 'success'
                });
                this.formVisible = false
                this.query(1)
            },
            async deleteById(id) {
                const res = await axios.get("/game/delete", {params: {id: id}})
                const {code, msg} = res.data
                if (code !== 200) {
                    this.$message({
                        message: msg,
                        type: 'error'
                    });
                    return
                }
                this.$message({
                    message: '操作成功',
                    type: 'success'
                });
                this.query(this.lastPage)
            },
            handleUp(id) {
                this.updateStatus(id, 1);
            },
            handleDown(id) {
                this.updateStatus(id, 2);
            },
            async updateStatus(id, status) {
                const obj = {
                    id: id,
                    isActive: 0
                }

                const res = await axios.get("/products/update", {
                    params: {...obj}
                })
                const {code, msg} = res.data
                if (code !== 200) {
                    this.$message({
                        message: msg,
                        type: 'error'
                    });
                    return
                }
                this.$message({
                    message: '操作成功',
                    type: 'success'
                });
                this.query(this.lastPage)
            },
            reload() {
                this.query(this.lastPage);
            },
            parseJSON(str) {
                return JSON.parse(str);
            },
            showFullDes(des) {
                this.description = des;
                this.dialogVisibleDes = true;
            },
            getCategoryText(category) {
                switch (category) {
                    case '1':
                        return '低级游戏';
                    case '2':
                        return '高级游戏';
                    default:
                        return '未知类别';
                }
            },
        }
    })
</script>
</body>

</html>